<template>
  <div class="s1" v-if="showList">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(v, index) in navList" :key="v.id">
        <div>
               <span :class="{'router-link-active':ind == index}" @click="selectNav(index ,v.id)">
                  {{v.name}}
               </span>
        </div>
      </swiper-slide>
    </swiper>
    <div class="grad"></div>
  </div>
</template>

<script>
  export default {
    name:'NavList',
    props:{
      navList:Array
    },
    data(){
      return{
        ind:0,
        navId:0,
        swiperOption: {
          slidesPerView:4,
          spaceBetween: 0,
          freeMode: true,
          pagination: {
            clickable: true
          }
        },
      }
    },
    methods:{
      selectNav(index,id){
        this.ind=index
        this.navId= id
        this.$emit('changeNav',id)

      }
    },
    computed: {
      showList() {
        return this.navList.length
      }
    }
  }
</script>

<style scoped>
  .s1{
    background-color: white;
  }

  .swiper-container {
    height: 100%;
    border-bottom: solid 1px #c5c5c7;
    background: white;
    line-height: 88px;
    /*max-height: 88px;*/
  }

  .swiper-wrapper {
    width: auto;
    height: 100%;
    white-space: nowrap;
  }

  .swiper-slide {
    float: left;
    line-height: 88px;
    text-align: center;
    /*margin-right: 20px !important;*/

  }
  .swiper-slide div{
    padding: 0 20px;
  }
  .swiper-slide span{
    display: inline-block;
    width: 100%;
    height:76px;
    font-size: 30px;
    color:#63656a
  }

  .swiper-slide:nth-of-type(1) {
    width: 120px !important;
  }
  .slider-wrapper .swiper-slide:nth-of-type(1) {
    width: 100% !important;
  }
  .router-link-active {
    border-bottom: solid 1px #1ea9a8;
    color: #1ea9a8 !important;
  }

</style>
